<template>
  <div id="page-activity">
    <h2>活动信息列表</h2>

    <card>
      <Input v-model="query.act_name" placeholder="请输入活动主题" style="width: 300px"></Input>
      <Select v-model="query.act_status" style="width: 120px" placeholder="请选择活动状态">
        <Option :value="-1" :key="-1">全部活动</Option>
        <Option
          v-for="item in actStatusCodeList"
          :key="item.code"
          :value="item.code">{{ item.name }}</Option>
      </Select>
      <Button type="primary" @click="search()">查询</Button>
    </card>

    <card class="mt10">
      <div class="m10 clearfix">
        <Button type="info" class="fr" @click="showCreateModal()">新增活动</Button>
      </div>

      <div v-if="list && list.length >0">
        <div class="activity-list" :loading="loading" v-if="list && list.length > 0">
          <Row
            v-for="(item, index) in list"
            :key="index"
            class="mt10">
            <Col span="4">
              <div class="image-wrapper" @click="showDetailModal(item)"
                :style="{ backgroundImage: 'url(' + splitImg(item.hb_image_path)[0].url + ')' }">
              </div>
            </Col>
            <Col span="20">
              <h3>
                <span class="ellipsis black" @click="showDetailModal(item)">{{ item.act_name}}</span>
                <Dropdown class="activity-handlers" trigger="click">
                  <a href="javascript:void(0)">
                    操作
                    <Icon type="arrow-down-b"></Icon>
                  </a>
                  <DropdownMenu slot="list">
                      <DropdownItem>
                        <a href="javascript:;" @click="showUpdateModal(item)">编辑</a>
                      </DropdownItem>
                      <DropdownItem>
                        <a href="javascript:;" @click="onRemove(item.pkInitial)">删除</a>
                      </DropdownItem>
                      <DropdownItem v-if="item.act_type === 3">
                        <a href="javascript:;" @click="onSubmit(item.pkInitial)">提交审核</a>
                      </DropdownItem>
                      <DropdownItem :disabled="item.act_status !== 0" >
                        <a href="javascript:;" @click="item.act_status === 0 && onRelease(item.pkInitial)">发布</a>
                      </DropdownItem>
                      <DropdownItem>
                        <a href="javascript:;" @click="onCancel(item.pkInitial)">取消</a>
                      </DropdownItem>
                      <DropdownItem>
                        <a href="javascript:;" @click="onEnd(item.pkInitial, item.pk_act_base_info)">结束</a>
                      </DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </h3>
              <div class="activity-content">
                <div>
                  <label>活动类型：</label>
                  <span>{{item.actTypeName}}</span>
                </div>
                <div>
                  <label>活动时间：</label>
                  <span>
                    {{item.act_start_time | formatDate('YYYY-MM-DD HH:mm') }}
                    ~
                    {{item.act_end_time | formatDate('YYYY-MM-DD HH:mm') }}</span>
                </div>
                <div>
                  <label>报名人数：</label>
                  <span>{{item.sign_total}}/{{item.sign_up_total}}</span>
                </div>
                <div>
                  <label>活动状态：</label>
                  <span class="activity-status">{{ item.actStatusName }}</span>
                </div>
                <div class="buttons">
                  <Button type="info" size="small" @click="goManage(item.pk_act_base_info, item.pkInitial)" class="mr5 fs14">
                     <i class="iconfont icon-guanli2"></i> 管理
                  </Button>
                </div>
              </div>
            </Col>
          </Row>
        </div>
        <div v-else>
          没有任何数据
        </div>

        <div class="m10 clearfix" v-if="page.total > 0">
          <div class="fr">
            <Page
              show-total
              :total="page.total"
              :current="query.currentPage"
              @on-change="onChangePage">
            </Page>
          </div>
        </div>
      </div>
      <div v-else class="empty-con">
        <i></i>
        <p>该筛选条件下没有任何内容</p>
      </div>
    </card>

    <detail-modal :form="detailForm"></detail-modal>
    <update-modal :form="form" @submit="getList"></update-modal>
    <end-modal :form="endForm" @submit="getList"></end-modal>
  </div>
</template>

<script>
  import Vue from 'vue'
  import _ from 'underscore'
  import { mapGetters } from 'vuex'
  import activityApi from '@/api/activity'
  import updateModal from './components/list/update-modal'
  import detailModal from './components/list/detail-modal'
  import endModal from './components/list/end-modal'

  export default {
    name: 'page-activity',
    components: {
      updateModal,
      detailModal,
      endModal
    },
    data () {
      return {
        loading: false,
        query: {
          act_name: '',
          act_status: -1,
          pk_rclub_info: null,
          currentPage: 1,
          limit: 10
        },
        page: {
          total: 0
        },
        list: [],
        detailForm: {
          visible: false,
          data: {},
          template: {
            act_type: 1,
            sign_up_total: 0,
            province: '',
            city: '',
            county: ''
          }
        },
        form: {
          visible: false,
          data: {},
          template: {
            act_type: 1,
            sign_up_total: 0,
            province: '',
            city: '',
            county: ''
          }
        },
        endForm: {
          visible: false,
          data: {},
          template: {
          }
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        actStatusCodeList: 'actStatusCodeList'
      })
    },
    watch: {
      'query.currentPage': 'getList'
    },
    methods: {
      splitImg (str) {
        return Vue.filter('splitImg')(str || '')
      },
      onChangePage (currentPage) {
        this.query.currentPage = currentPage
      },
      goManage (id, pkInitial) {
        this.$router.push({path: `/activity/${id}/${pkInitial}/plan`})
      },
      async showDetailModal (row) {
        const { body } = await activityApi.info.detail({ pkInitial: row.pkInitial })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.detailForm.data = _.extend({}, this.form.template, this.$service.translate2date(body.responseData))
          this.detailForm.visible = true
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '获取详情错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      showCreateModal () {
        this.form.data = Object.assign({}, this.form.template)
        this.form.visible = true
      },
      async showUpdateModal (detail) {
        const { body } = await activityApi.info.detail({ pkInitial: detail.pkInitial })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.form.data = _.extend({}, this.form.template, this.$service.translate2date(body.responseData))
          this.form.visible = true
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '获取详情错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      onRemove (id) {
        this.$Modal.confirm({
          title: '确认删除吗',
          content: '<p>删除后将不能恢复，确定删除？</p>',
          onOk: () => {
            this.remove(id)
          }
        })
      },
      async remove (id) {
        const { body } = await activityApi.info.remove({ pkInitial: id })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('删除成功')
          this.getList()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      onSubmit (id) {
        this.$Modal.confirm({
          title: '确认提交审核吗',
          onOk: () => {
            this.submit(id)
          }
        })
      },
      async submit (id) {
        const { body } = await activityApi.info.submit({ pkInitial: id })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('提交审核成功')
          this.getList()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      onRelease (id) {
        this.$Modal.confirm({
          title: '确认发布吗',
          content: '<p>发布后会员在俱乐部端可以查看并报名活动，是否继续发布？</p>',
          onOk: () => {
            this.release(id)
          }
        })
      },
      async release (id) {
        const { body } = await activityApi.info.release({ pkInitial: id })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('发布成功')
          this.getList()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      onCancel (id) {
        this.$Modal.confirm({
          title: '确认取消吗',
          content: '<p>取消后将不能恢复，确定取消？</p>',
          onOk: () => {
            this.cancel(id)
          }
        })
      },
      async cancel (id) {
        const { body } = await activityApi.info.cancel({ pkInitial: id })
        if (this.$apiHelper.requestSuccessed(body.responseCode)) {
          this.$Message.info('取消成功')
          this.getList()
        } else {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
      },
      onEnd (pkInitial, pkActBaseInfo) {
        this.endForm.pkInitial = pkInitial
        this.endForm.pkActBaseInfo = pkActBaseInfo
        this.endForm.visible = true
      },
      search () {
        this.query.currentPage = 1
        this.getList()
      },
      async getList () {
        this.loading = true
        this.query.pk_rclub_info = this.userInfo.pkRclubInfo
        const { body } = await activityApi.info.list(this.query)
        const { responseData } = body
        if (!this.$apiHelper.requestSuccessed(body.responseCode)) {
          setTimeout(() => {
            this.$Modal.error({
              title: '错误',
              content: body.desc,
              onOk: () => {}
            })
          }, 500)
        }
        this.loading = false
        this.list = this.$service.translate2date(responseData.content)
        this.page.total = responseData.totalElements
      }
    },
    mounted () {
      this.$store.dispatch('getCode', 'act_status')
      this.$store.dispatch('getUserInfo')
      this.getList()
    }
  }
</script>

<style lang="less">
  #page-activity {
    .activity-list {
      .image-wrapper {
        width: 95%;
        height: 161px;
        position: relative;
        cursor: pointer;
        border-radius: 6px;
        border: 1px solid #e5e5e5;
        padding: 4px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }

      h3 {
        position: relative;
        max-width: 550px;
        font-weight: normal;
        > span {
          &:nth-child(1) {
            font-size: 20px;
            display: inline-block;
            width: 450px;
          }
        }
      }

      .ivu-row {
        border-bottom: 1px dashed #efefef;
        margin-bottom: 15px;
        padding-bottom: 15px;
        min-height: 147px;
        &:last-child {
          border-bottom: 0 none
        }
      }

      .activity-content {
        > div {
          margin-top: 2px
        }
      }

      .activity-status {
        color: #f30213;
        font-weight: bold;
      }

      .activity-handlers {
        position: absolute;
        right: 0px;
        top: 3px;
        font-weight: normal;
        font-size: 16px;
        .ivu-dropdown-rel {
          a {
            color: #2d8cf0;
          }
        }
        .ivu-dropdown-item {
          a {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
</style>
